<template>
  <el-card header="Reftable Header" class="mb-5">    
    <el-table :data="dataTable" :show-header="true" :highlight-current-row="true" :stripe="true" row-class-name="primary" style="width: 100%" @row-click="onTableRowClicked">
      <el-table-column prop="label" label="key"></el-table-column>
      <el-table-column prop="value" label="val"></el-table-column>
      <el-table-column prop="desc" label="des"></el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  props: {
    data: Object,
    debug: Object,
  },
  data() {
    return {
      dataTable: [],
    };
  },
  created() {
    
  },
  watch: {
    data(newVal, oldVal) {
      this.dataTable = this.covertToTable(newVal);
    },
  },
  methods: {
    covertToTable(data) {
      return [
        { 
          "label": "Magic", 
          "value": Formater.char(data.magic), 
          "desc": "Magic number of the file, always REFT",
          "debug": data._debug.magic,
        },
        { 
          "label": "Version", 
          "value": Formater.number(data.version), 
          "desc": "reftable version",
          "debug": data._debug.version,
        },
        { 
          "label": "block_size", 
          "value": Formater.number(data.blockSize), 
          "desc": "block_size",
          "debug": data._debug.blockSize,
        },
        { 
          "label": "min_update_index", 
          "value": Formater.number(data.minUpdateIndex, 16), 
          "desc": "min_update_index",
          "debug": data._debug.minUpdateIndex,
        },
        { 
          "label": "max_update_index", 
          "value": Formater.number(data.maxUpdateIndex, 16), 
          "desc": "max_update_index",
          "debug": data._debug.maxUpdateIndex,
        },
      ];
    },
    
    onTableRowClicked(row, column, event) {
      this.$emit('clicked', row);
    },
  },
  mounted() {

  },
  computed: {
    
  }
};
</script>